{# SETTINGS #}
{% set element = element|default('article') %}
{% set headline__element = headline__element|default('h2') %}
{% if url is not empty %}
  {% set attributes = attributes.setAttribute('href', url) %}
  {% set element = 'a' %}
{% endif %}

{# CARD CLASSES #}
{% set link_classes = ([
  alignment == 'center' ? 'mx-auto': '',
  'text-indigo-500', 'inline-flex', 'md:mb-2', 'lg:mb-0', 'items-center', 'underline',
]) | sort | join(' ') | trim %}

{% set classes = ([
  alignment == 'center' ? 'text-center rounded': '',
  bg_color == 'gray' ? 'bg-gray-200',
  bg_color == 'blue' ? 'bg-blue-200',
  'w-full flex  max-w-xl',
  'border-2 border-gray-200 rounded-lg overflow-hidden w-full',
  variant == 'horizontal' ? 'flex-col md:flex-row' : 'flex-col'
] | sort | join(' ') | trim ) %}

{% set attributes = attributes|default(create_attribute()).addClass(classes) %}

{# TEMPLATE #}
<{{ element }} {{ attributes }}>
  {% if image is not empty %}
    <div class="flex-1">
      {% block image %}
        {{ image }}
      {% endblock %}
    </div>
  {% endif %}
  <div class="p-6 flex-1">
    <div{{ region_attributes.preheadline|default(create_attribute()).addClass('tracking-widest text-lg title-font font-medium text-gray-500 mb-1') }}>
      {% block preheadline %}
        {{ preheadline }}
      {% endblock %}
    </div>
    <{{ headline__element }}{{ region_attributes.headline|default(create_attribute()).addClass('font-bold text-l md:text-2xl headline dark:text-gray-50 font-sans mb-2.5 md:mb-3.5') }}>
      {% block headline %}
        {{ headline }}
      {% endblock %}
    </{{ headline__element }}>
    <div{{ region_attributes.text|default(create_attribute()).addClass('leading-relaxed mb-3') }}>
      {% block text %}
        {{ text }}
      {% endblock %}
    </div>
  {% if show_read_more %}
    <div{{ region_attributes.link|default(create_attribute()).addClass(link_classes) }}>
      {{ "Read more now"|t }}
      {% include "@atoms/svg/_svg--icon.twig" with {
        icon: 'arrow',
        size: 'w-4 h-4 ml-2',
      } only %}
    </div>
  {% endif %}
  </div>
</{{ element }}>
